<template>
	<div class="AddNewMatch">
		<div class="UploadLogo">
			<div style="width: 10%; line-height: 42px;">赛事logo ：</div>
			<div>
				<el-upload :action="actionImg" :headers={token:Token} list-type="picture-card" :limit="1"
				 :on-success='imgUploadSuccess' :on-preview="handlePictureCardPreview" :on-remove="handleRemove">
					<i class="el-icon-plus"></i>
				</el-upload>
				<el-dialog :visible.sync="dialogVisible">
					<img width="100%" :src="dialogImageUrl" alt="">
				</el-dialog>
				<div style="color: #8F8F8F;font-size: 14px; text-align: center;">只支持.jpg .png格式(只能上传一张)</div>
			</div>
		</div>
		<div class="MatchInfoOne">
			<div class="MatchName">
				<div class="NameFont"><i class='iconfont icon-xinghao colorRed'></i> 赛事名称 ：</div>
				<el-input v-model="MatchName" placeholder="请输入赛事名称" class="InputSize" @change="MatchNameChange"></el-input>
			</div>
			<div class="MatchReferee">
				<div class="NameFont"><i class='iconfont icon-xinghao colorRed'></i>指派裁判长 ：</div>
				<el-input v-model="MatchReferee" maxlength="11" placeholder="请输入联系方式" style="width: 40%"></el-input>
				<div style="width: 20%;line-height: 42px;margin-left: 5%;">{{RefereeName}}</div>
			</div>
		</div>
		<div class="MatchInfoTwo">
			<!-- 主办单位 -->
			<div class="MatchOrganization">
				<div class="NameFont"><i class='iconfont icon-xinghao colorRed'></i> 主办单位 ：</div>
				<div style="width: 80%;display: flex;align-items: center;">
					<el-tag :key="tag" v-for="tag in dynamicTags" closable :disable-transitions="false" @close="handleClose(tag)"
					 color="#fff" style="width: 20%;">
						{{tag}}
					</el-tag>
					<el-input :class="inputVisibleAssist?'input-new-tag-show':'input-new-tag'" v-if="inputVisible" v-model="inputValue"
					 ref="saveTagInput" size="small" @keyup.enter.native="handleInputConfirm" @blur="handleInputConfirm">
					</el-input>
					<el-button v-else :class="dynamicTags.length > 0 ? 'button-new-tag-show':'button-new-tag'" size="small" @click="showInput">添加主办单位</el-button>
				</div>
			</div>
			<!-- 协办单位 -->
			<div class="MatchAssisstOrganization">
				<!-- <div class="NameFont">承办单位 ：</div>
				<div style="width: 80%;display: flex;align-items: center;">
					<el-tag :key="tag" v-for="tag in dynamicTagsAssist" closable :disable-transitions="false" @close="handleCloseAssist(tag)"
					 color="#fff" style="width: 20%;">
						{{tag}}
					</el-tag>
					<el-input :class="inputVisibleAssist?'input-new-tag-show':'input-new-tag'" v-if="inputVisibleAssist" v-model="inputValueAssist"
					 ref="saveTagInputAssist" size="small" @keyup.enter.native="handleInputConfirm" @blur="handleInputConfirmAssist">
					</el-input>
					<el-button v-else :class="dynamicTagsAssist.length > 0? 'button-new-tag-show':'button-new-tag'" size="small"
					 @click="showInputAssist">添加承办单位</el-button>
				</div> -->
			</div>
		</div>
		<div class="MatchInfoThree">
			<div class="MatchLocation">
				<div class="NameFont"><i class='iconfont icon-xinghao colorRed'></i> 比赛地点 ：</div>
				<el-input v-model="MatchLocation" placeholder="请输入比赛地点" class="InputSize"></el-input>
			</div>
			<div class="MatchContactor">
				<div class="NameFont"><i class='iconfont icon-xinghao colorRed'></i> 赛事联系人 ：</div>
				<el-input v-model="MatchContactor" placeholder="请输入赛事联系人" class="InputSize"></el-input>
			</div>
		</div>
		<div class="series">
			<div style=" align-items: baseline; display: flex;  width: 45%;">
				<div class="NameFont">是否为系列赛 ：</div>
				<el-radio-group v-model="radio" style="width:75%;">
					<el-radio :label="1">单次赛事</el-radio>
					<el-radio :label="2">选择系列赛</el-radio>
					<el-radio :label="3">新建赛事为系列赛</el-radio>
				</el-radio-group>
			</div>
			<div v-show="ShowChooseSeries" class="ChooseSeries">
				<div class="NameFont">选择系列赛 ：</div>
				<el-select v-model="SerierSelect" placeholder="请选择系列赛">
					<el-option v-for="item in options" :key="item.id" :label="item.name" :value="item.id">
					</el-option>
				</el-select>
			</div>
		</div>
    <div class="sign_type" style="align-items: baseline; display: flex;  width: 45%;">
      <div class="NameFont"><i class='iconfont icon-xinghao colorRed'></i> 报名方式 ：</div>
      <el-radio-group v-model="signtype" style="width:75%;">
      	<el-radio :label="0">个人报名</el-radio>
      	<el-radio :label="1">团体报名</el-radio>
      </el-radio-group>
    </div>
		<div class="UploadRules">
			<div class="NameFont">上传竞赛规程 ：</div>
			<div>
				<el-upload class="upload-demo" :action="actionFile" :headers={token:Token} :on-change="handleChange"
				 :limit="1" :before-upload="beforeAvatarUpload" :on-success='fileUploadSuccess' :file-list="PdfList">
					<el-button size="small" type="primary">点击上传</el-button>
					<div slot="tip" class="el-upload__tip">只能上传pdf文件，且不超过20MB(只能上传单个pdf)</div>
				</el-upload>
			</div>
		</div>
		<div style="justify-content: center;display: flex;margin-bottom:50px;">
			<el-button round style="width: 200px" type="primary" @click="SubmitNewMatch">提交</el-button>
		</div>
	</div>
</template>

<script>
	export default {
		name: "AddNewMatch",
		data() {
			return {
				MatchName: '',
				MatchReferee: '',
				ReferName: '',
				ReferId: '',
				MatchOrganization: '',
				MatchAssisstOrganization: '',
				MatchLocation: '',
				MatchContactor: '',
				radio: 1,
        signtype:0,
				options: [],
				// options: [{
				//   value: '1',
				//   label: 'xxx2018超级联赛武汉站'
				// }, {
				//   value: '2',
				//   label: 'xxx2018超级联赛上海站'
				// }, {
				//   value: '3',
				//   label: 'xxx2018超级联赛北京站'
				// },],
				SerierSelect: '',
				dialogImageUrl: '',
				dialogVisible: false,
				PdfList: [],
				ShowChooseSeries: false,
				ImgUrl: '',
				fileUrl: '',
				// 主办单位数据
				dynamicTags: [],
				inputVisible: false,
				inputValue: '',
				// 添加协办数据
				dynamicTagsAssist: [],
				inputVisibleAssist: false,
				inputValueAssist: "",
			}
		},
		watch: {
			radio: function(val) {
				if (val == 2) {
					var _this = this
					this.$axios.get('/UserApply/getClubInfo', {
						headers: {
							token: window.sessionStorage.getItem('token')
						}
					}).then(function(res) {
						var club_id = res.data.data.id
						_this.$axios.post('/event/gain_series', {
								club_id: club_id
							}, {
								headers: {
									token: window.sessionStorage.getItem('token')
								}
							})
							.then(function(res) {
								console.log(res)
								if (res.data.code == 400) {
									_this.$message({
										showClose: true,
										message: res.data.message,
										type: 'error'
									});
								}
								if (res.data.code == 200) {
									_this.$message({
										showClose: true,
										message: "获取成功",
										type: 'success'
									});
									_this.ShowChooseSeries = true
									console.log(res.data.data)
									_this.options = res.data.data
								}
							})
					})
				}
			}
		},
		computed: {
			RefereeName(val) {
				if (this.MatchReferee.length > 10) {
					var _this = this
					this.$axios.post('/event/gain_ref', {
							phone: this.MatchReferee,
						}, {
							headers: {
								token: this.Token
							}
						}).then(function(res) {
							if (res.data.code == 400) {
								_this.$message({
									showClose: true,
									message: res.data.message,
									type: 'error'
								});
							}
							if (res.data.code == 200) {
								_this.ReferName = res.data.data.get_user.name
								_this.ReferId = res.data.data.id
								return _this.ReferName
							}

						})
						.catch(function(error) {
							console.log(error)
						});
				}
				return this.ReferName
			},
			Token() {
				return window.sessionStorage.getItem('token')
			},
			actionImg(){
				return `${this.$axios.defaults.baseURL}/event/img`
			},
			actionFile(){
				//http://tennis.laigl.com/api/v1/event/file
				return `${this.$axios.defaults.baseURL}/event/file`
			}
		},
		methods: {
			// 饿了么ui添加主办单位事件
			handleClose(tag) {
				this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1);
			},
			showInput() {
				this.inputVisible = true;
				this.$nextTick(_ => {
					this.$refs.saveTagInput.$refs.input.focus();
				});
			},
			handleInputConfirm() {
				let inputValue = this.inputValue;
				if (inputValue) {
					this.dynamicTags.push(inputValue);
				}
				this.inputVisible = false;
				this.inputValue = '';
			},
			// ***************/////////////
			// 饿了么ui添加协办单位事件
			handleCloseAssist(tag) {
				this.dynamicTagsAssist.splice(this.dynamicTagsAssist.indexOf(tag), 1);
			},

			showInputAssist() {
				this.inputVisibleAssist = true;
				this.$nextTick(_ => {
					this.$refs.saveTagInputAssist.$refs.input.focus();
				});
			},
			handleInputConfirmAssist() {
				let inputValueAssist = this.inputValueAssist;
				if (inputValueAssist) {
					this.dynamicTagsAssist.push(inputValueAssist);
				}
				this.inputVisibleAssist = false;
				this.inputValueAssist = '';
			},
			// ***************/////////////
			handleRemove(file, fileList) {
				console.log(file, fileList);
			},
			handlePictureCardPreview(file) {
				this.dialogImageUrl = file.url;
				this.dialogVisible = true;
			},
			imgUploadSuccess(response, file, fileList) {
				console.log(response)
				this.ImgUrl = response.data
			},
			fileUploadSuccess(response, file, fileList) {
				console.log(response)
				this.fileUrl = response.data
			},
			beforeAvatarUpload(file) {
				const isPDF = file.type == 'application/pdf'
				const isPDF20M = file.size / 1024 / 1024 < 20;
				console.log(isPDF)
				console.log(file.type)
				if (!isPDF) {
					this.$message.error('上传竞赛规程只能是 pdf 格式!');
					file.slice(1)
				}
				return isPDF
			},
			handleAvatarSuccess(res, file) {
				console.log(11111)
				console.log(URL.createObjectURL(file.raw));
			},
			handleChange(file, fileList) {
				console.log(fileList)
				this.PdfList = fileList.slice(-3);
				console.log(this.PdfList)
			},
			MatchNameChange(value) {
				//UTF-8编码：一个英文字符等于一个字节，一个中文（含繁体）等于三个字节, 1个阿拉伯数字占1个字符若特殊符号是两个字符
				let ChineseReg = /[\u4E00-\u9FA5]/g;
				let EnglishReg = /[a-zA-Z]/ig;
				let ArabicReg = /[0-9]/ig
				let ChineseLen=0,EnglishLen=0,ArabicLen=0
				if (ChineseReg.test(value)) {
					ChineseLen = value.match(ChineseReg).length
				}
				if (EnglishReg.test(value)) {
					EnglishLen = value.match(EnglishReg).length
				}
				if (ArabicReg.test(value)) {
					ArabicLen = value.match(ArabicReg).length
				}
				let byteLen = ChineseLen*3+EnglishLen*2+ArabicLen
				if (byteLen>400) {
					this.$message({
						showClose: true,
						message: "赛事名称过长",
						type: 'info'
					});
				}
			},
			SubmitNewMatch() {
				if (this.MatchName.trim() == '') {
					this.$message({
						showClose: true,
						message: "请填写赛事名称",
						type: 'info'
					});
					return
				} else if (this.MatchReferee.trim() == '') {
					this.$message({
						showClose: true,
						message: "请指派裁判长",
						type: 'info'
					});
					return
				} else if (this.dynamicTags.length == 0) {
					this.$message({
						showClose: true,
						message: "请填写主办单位",
						type: 'info'
					});
					return
				} else if (this.MatchLocation.trim() == '') {
					this.$message({
						showClose: true,
						message: "请填写比赛地点 ",
						type: 'info'
					});
					return
				} else if (this.MatchContactor.trim() == '') {
					this.$message({
						showClose: true,
						message: "请填写赛事联系人 ",
						type: 'info'
					});
					return
				}
				var UploadObj = {}
				UploadObj.logo = this.ImgUrl
				UploadObj.name = this.MatchName
				UploadObj.red_id = this.ReferId
				UploadObj.host = this.dynamicTags.toString() //主办单位
				UploadObj.assist = this.dynamicTagsAssist.toString() //协办单位
				UploadObj.address = this.MatchLocation
				UploadObj.major = this.MatchContactor
				UploadObj.type = this.radio
        UploadObj.sign_type = this.signtype
				//UploadObj.series_id =
				UploadObj.rule = this.fileUrl
				UploadObj.series_id = this.SerierSelect
				console.log(UploadObj)
				var _this = this
				this.$axios.post('/event/new_event', {
						logo: UploadObj.logo,
						rule: UploadObj.rule,
						name: UploadObj.name,
						ref_id: UploadObj.red_id,
						host: UploadObj.host,
						assist: UploadObj.assist,
						address: UploadObj.address,
						major: UploadObj.major,
						series_id: UploadObj.series_id,
						type: UploadObj.type,
            sign_type:UploadObj.sign_type
					}, {
						headers: {
							'token': window.sessionStorage.getItem('token')
						}
					})
          // babel-plugin-transform-runtime
					.then(function(res) {
						console.log(res)
						if (res.data.code == 400) {
							_this.$message({
								showClose: true,
								message: res.data.message,
								type: 'error'
							});
						}
						if (res.data.code == 200) {
							console.log(res)
							_this.ShowChooseSeries = true
							_this.$message({
								showClose: true,
								message: res.data.message,
								type: 'success'
							});
							_this.$router.push('/Index/Match/')
						}
					})
			}
		},
	}
</script>

<style scoped>
	.AddNewMatch {
		width: 90%;
		height: 800px;
		margin-top: 50px;
		margin-left: 40px;
		display: flex;
		flex-direction: column;
		justify-content: space-around;
	}

	.UploadLogo {
		display: flex;
	}

	.colorRed {
		color: #f00;
		font-size: 10px !important;
	}

	.MatchInfo {
		display: flex;
		flex-direction: column;
	}

	.MatchInfoOne {
		display: flex;
		justify-content: space-between;
	}

	.MatchName {
		width: 45%;
		display: flex;
	}

	.MatchReferee {
		width: 45%;
		display: flex;
	}

	.MatchInfoTwo {
		display: flex;
		justify-content: space-between;
	}

	.MatchOrganization {
		width: 45%;
		display: flex;
	}

	.MatchAssisstOrganization {
		width: 45%;
		display: flex;
	}

	.MatchInfoThree {
		display: flex;
		justify-content: space-between;
	}

	.MatchLocation {
		width: 45%;
		display: flex;
	}

	.MatchContactor {
		width: 45%;
		display: flex;
	}

	.series {
		display: flex;
		justify-content: space-between;
	}

	.ChooseSeries {
		display: flex;
		width: 45%;
	}

	.UploadRules {
		width: 45%;
		display: flex;
	}

	.NameFont {
		width: 20%;
		min-width: 105px;
		line-height: 42px;
	}

	.InputSize {
		width: 65%;
		height: 42px;
	}

	/* 饿了么ui组件的样式 */
	.el-tag+.el-tag {
		margin-left: 10px;
	}

	.button-new-tag {
		height: 32px;
		line-height: 30px;
		padding-top: 0;
		padding-bottom: 0;
	}

	.button-new-tag-show {
		margin-left: 10px;
		height: 32px;
		line-height: 30px;
		padding-top: 0;
		padding-bottom: 0;
	}

	.input-new-tag {
		width: 90px;
		margin-left: 10px;
		vertical-align: bottom;
	}

	.input-new-tag {
		width: 90px;
		vertical-align: bottom;
	}

	.input-new-tag-show {
		width: 90px;
		vertical-align: bottom;
	}
</style>
